<template>
  <div class="pmjl-container">
    <table class="pmjl-table" border="1">
      <caption>数据预处理图</caption>
      <colgroup>
        <col width="4%"/>
        <col width="20%"/>
        <col width="20%"/>
        <col width="20%"/>
        <col width="36%"/>
      </colgroup>

      <tr style="height: 5rem;text-align: center;vertical-align: bottom;">
        <td>深度</td>
        <td>ROP</td>
        <td>
          <div class="c-red">C_isotope</div>
          <hr class="c-red"/>
          <div class="c-red both-clear">
            <span class="pull-left">-60</span>
            <span class="pull-right">0</span>
          </div>
          <div>Coco3</div>
        </td>
        <td>
          <div class="c-red">C1</div>
          <hr class="c-red"/>
          <div class="c-red both-clear">
            <span class="pull-left">0.1</span>
            <span class="pull-right">10</span>
          </div>
          <div>TG<small>25</small></div>
        </td>
        <td>
          <p>ECD</p>
        </td>
      </tr>
      <tr style="height: 1rem;">
        <td>
          <span class="pull-left">0</span>
          <span class="pull-right">15</span>
        </td>
        <td>
          <span class="pull-left">0</span>
          <span class="pull-right">20</span>
        </td>
        <td>
          <span class="pull-left">0.1</span>
          <span class="pull-right">10</span>
        </td>
        <td>
          <span class="pull-left">0.1</span>
          <span class="pull-right">10</span>
        </td>
      </tr>
      <tr class="tr-chart">
        <td>
          <div id="chart0" class="chart-container"></div>
        </td>
        <td>
          <div id="chart1" class="chart-container"></div>
        </td>
        <td>
          <div id="chart2" class="chart-container"></div>
        </td>
        <td>
          <div id="chart3" class="chart-container"></div>
        </td>
        <td>
          <div id="chart4" class="chart-container"></div>
        </td>
      </tr>
    </table>
    <!-- <div id="chart" style="width: 100%;height:500px;"></div> -->
    <div class="pmjl-container">
      <el-tooltip content="配置曲线样式" placement="top">
        <el-button
            type="primary"
            icon="el-icon-setting"
            circle
            class="style-editor-button"
            @click="styleDrawerVisible = true"
        ></el-button>
      </el-tooltip>

      <el-drawer
          title="曲线样式配置"
          :visible.sync="styleDrawerVisible"
          direction="rtl"
          size="450px">

        <div class="drawer-body">
          <el-form label-width="80px" size="small">
            <el-form-item
                v-for="(style, seriesName) in seriesStyles"
                :key="seriesName"
                :label="seriesName.toUpperCase()">

              <div class="style-config-row">
                <el-color-picker v-model="style.color" show-alpha class="style-config-item"></el-color-picker>
                <el-input-number v-model="style.width" :min="1" :max="10" label="线宽"
                                 class="style-config-item"></el-input-number>
                <el-select v-model="style.type" placeholder="请选择线型" class="style-config-item">
                  <el-option label="实线" value="solid"></el-option>
                  <el-option label="虚线" value="dashed"></el-option>
                  <el-option label="点线" value="dotted"></el-option>
                </el-select>
              </div>

            </el-form-item>
          </el-form>
        </div>

        <div class="drawer-footer">
          <el-button @click="resetStyles">恢复默认</el-button>
          <el-button type="primary" @click="applyStyles">应用并关闭</el-button>
        </div>
      </el-drawer>

      <table class="pmjl-table" border="1">
      </table>

    </div>
  </div>
</template>

<script>
import api from '@/api/api.js';

export default {
  name: 'PreDataKxylEcharts',
  mounted() {
    // 保存初始样式为默认值，以便后续可以重置
    this.defaultSeriesStyles = JSON.parse(JSON.stringify(this.seriesStyles));
  },
  data() {
    return {
      chart0: null,
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null,
      echartsData: [],
      map: {
        well_id: '',
        n: '',
        Vp: '',
        Vs: '',
        h_rect: 0,
        H_rect: 0,
        UCS: '',
        o: '',
      },
      styleDrawerVisible: false, // 控制抽屉显示
      defaultSeriesStyles: {}, // 用于保存默认样式
      seriesStyles: {
        nhg: {color: '#ffc107', width: 2, type: 'solid'},
        obg: {color: '#343a40', width: 2, type: 'solid'},
        dc: {color: '#17a2b8', width: 2, type: 'solid'},
        pp: {color: '#ff2f00', width: 2, type: 'solid'},
        pc: {color: '#28a745', width: 2, type: 'solid'},
        pf: {color: '#3556dc', width: 2, type: 'solid'},
      },
      showStyleEditor: false, // 控制样式编辑器UI的显示/隐藏
    }
  },
  methods: {
    initialize() {
      this.chart0 = this.$echarts.init(document.getElementById('chart0'));
      this.chart1 = this.$echarts.init(document.getElementById('chart1'));
      this.chart2 = this.$echarts.init(document.getElementById('chart2'));
      this.chart3 = this.$echarts.init(document.getElementById('chart3'));
      this.chart4 = this.$echarts.init(document.getElementById('chart4'));


      // 设置图表联动
      this.setupChartLinkage();
      this.retrieveEchartsData();
    },
    setupChartLinkage() {
      //设置图表联动，共享y轴缩放
      const charts = [this.chart0, this.chart1, this.chart2, this.chart3, this.chart4];

      charts.forEach((chart, index) => {
        chart.on('dataZoom', (params) => {
          //当一个图表发生缩放时，同步到其他图表
          const zoomInfo = chart.getOption().dataZoom[0];

          charts.forEach((otherChart, otherIndex) => {
            if (index !== otherIndex) {
              otherChart.setOption({
                dataZoom: [{
                  start: zoomInfo.start,
                  end: zoomInfo.end
                }]
              });
            }
          });
        });
      });
    },
    retrieveEchartsData() {
      api.post('/kxyl/fff', this.map)
          .then(response => {
            // 处理成功的响应
            this.echartsData = response.data.list || [];
            return this.echartsData;
          }).then(this.renderEcharts).catch(() => {
        this.echartsData = [];
      })
    },
    renderEcharts() {
      const data1 = []; // pp数据
      const data2 = []; // pc数据
      const data3 = []; // pf数据
      const data4Nhg = []; // nhg数据
      const data4Obg = []; // obg数据
      const dataDc = []; // dc数据

      this.echartsData.forEach(item => {
        item.depth = Number(item.depth);
        // [压力值, 深度值] 坐标对
        data1.push([item.pp, item.depth, item.id]);
        data2.push([item.pc, item.depth, item.id]);
        data3.push([item.pf, item.depth, item.id]);
        data4Nhg.push([item.nhg, item.depth, item.id]);
        data4Obg.push([item.obg, item.depth, item.id]);
        dataDc.push([item.dc, item.depth, item.id]);
      });
      this.renderChart0(data1);
      this.renderChart1(data4Nhg);
      this.renderChart2(data4Obg);
      this.renderChart3(dataDc);
      this.renderChart4(data1, data2,data3);
    },
    renderChart0(depthData) {
      // 从传入的数据中提取深度值数组
      const depths = depthData.map(item => item[1]);
      const option = {
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        //只显示y轴
        yAxis: {
          type: 'value',
          inverse: true,
          min: Math.min(...depths) || 1000,
          max: Math.max(...depths) || 4000,
          // 确保显示y轴刻度标签
          axisLabel: {
            show: true
          },
        },
        // 不显示x轴
        xAxis: {
          show: false
        },
        // 添加dataZoom配置，使chart0可以跟随其他图表缩放
        dataZoom: [
          {
            type: 'inside',
            zoomOnMouseWheel: 'ctrl',
            start: 0,
            end: 100,
            yAxisIndex: 0,
            moveOnMouseWheel: true
          }
        ],
        // 不显示任何系列数据
        series: []
      }
      this.chart0.setOption(option);
    },
    renderChart1(ds) {
      const nhgStyle = this.seriesStyles.nhg; // 获取 nhg 的样式配置
      const option = {
        legend: {
          data: ['nhg']
        },
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            axis: 'y'
          },
        },
        yAxis: {
          type: 'value',
          inverse: true,
          min: 1000,
          max: 4000,
          axisLabel: {
            show: false
          }
        },
        dataZoom: [
          {
            type: 'inside',
            zoomOnMouseWheel: 'ctrl',
            start: 0,
            end: 100,
            show: true,
            yAxisIndex: 0,
            moveOnMouseWheel: true
          }
        ],
        xAxis: {
          type: 'value',
          axisLine: {
            show: true
          }
        },
        series: [
          {
            name: 'nhg',
            type: 'line', // 这里设置曲线的类型为'line'，你也可以设置为'area'来创建面积图等
            data: ds,
            encode: {tooltip: 0},
            symbol: 'none',
            lineStyle: {
              color: nhgStyle.color,
              width: nhgStyle.width,
              type: nhgStyle.type
            },
            itemStyle: {
              color: nhgStyle.color,
            }
          }
        ]
      };
      this.chart1.setOption(option);
    },
    renderChart2(ds) {
      const obgStyle = this.seriesStyles.obg; // 获取 obg 的样式配置
      const option = {
        legend: {
          data: ['obg'],
        },
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            axis: 'y',
          },
        },
        yAxis: {
          type: 'value',
          inverse: true,
          min: 1000,
          max: 4000,
          axisLabel: {
            show: false
          }
        },
        dataZoom: [
          {
            type: 'inside',
            zoomOnMouseWheel: 'ctrl',
            show: false,
            start: 0,
            end: 100,
            yAxisIndex: 0,
            moveOnMouseWheel: true
          }
        ],
        xAxis: {
          type: 'value',
          axisLine: {
            show: true
          }
        },
        series: [
          {
            name: 'obg',
            type: 'line', // 这里设置曲线的类型为'line'，你也可以设置为'area'来创建面积图等
            data: ds,
            encode: {tooltip: 0},
            symbol: 'none',
            lineStyle: {
              color: obgStyle.color,
              width: obgStyle.width,
              type: obgStyle.type
            },
            itemStyle: {
              color: obgStyle.color,
            }
          }
        ]
      };
      this.chart2.setOption(option);
    },
    renderChart3(ds) {
      const dcStyle = this.seriesStyles.dc; // 获取 dc 的样式配置
      const option = {
        legend: {
          data: ['dc'],
        },
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            axis: 'y'
          },
        },
        yAxis: {
          type: 'value',
          inverse: true,
          min: 1000,
          max: 4000,
          axisLabel: {
            show: false
          }
        },
        dataZoom: [
          {
            type: 'inside',
            zoomOnMouseWheel: 'ctrl',
            show: false,
            start: 0,
            end: 100,
            yAxisIndex: 0,
            moveOnMouseWheel: true
          }
        ],
        xAxis: {
          type: 'value',
          axisLine: {
            show: true
          }
        },
        series: [
          {
            name: 'dc',
            type: 'line', // 这里设置曲线的类型为'line'，你也可以设置为'area'来创建面积图等
            smooth: true,
            data: ds,
            encode: {tooltip: 0},
            symbol: 'none',
            lineStyle: {
              color: dcStyle.color,
              width: dcStyle.width,
              type: dcStyle.type
            },
            itemStyle: {
              color: dcStyle.color, // 图例图标颜色与系列颜色一致
            }
          }
        ]
      };
      this.chart3.setOption(option);
    },
    renderChart4(ds, ps,obg) {
      const pfStyle = this.seriesStyles.pf;
      const ppStyle = this.seriesStyles.pp;
      const pcStyle = this.seriesStyles.pc;
      const option = {
        legend: {
          data: ['pp', 'pc', 'pf']
        },
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            axis: 'y'
          },
        },
        yAxis: {
          type: 'value',
          inverse: true,
          min: 1000,
          max: 4000,
          axisLabel: {
            show: false
          }
        },
        dataZoom: [
          {
            type: 'inside',
            zoomOnMouseWheel: 'ctrl',
            show: false,
            start: 0,
            end: 100,
            yAxisIndex: 0,
            moveOnMouseWheel: true
          }
        ],
        xAxis: {
          type: 'value',
          axisLine: {
            show: true
          }
        },
        series: [
          {
            name: 'pp',
            type: 'line', // 这里设置曲线的类型为'line'，你也可以设置为'area'来创建面积图等
            smooth: true,
            data: ds,
            encode: {tooltip: 0},
            symbol: 'none',
            lineStyle: {
              color: ppStyle.color,
              width: ppStyle.width,
              type: ppStyle.type
            },
            itemStyle: {
              color: ppStyle.color,
            }
          },
          {
            name: 'pc',
            type: 'line', // 这里设置曲线的类型为'line'，你也可以设置为'area'来创建面积图等
            smooth: true,
            data: ps,
            encode: {tooltip: 0},
            symbol: 'none',
            lineStyle: {
              color: pcStyle.color,
              width: pcStyle.width,
              type: pcStyle.type
            },
            itemStyle: {
              color: pcStyle.color,
            }
          },
          {
            name: 'pf',
            type: 'line', // 这里设置曲线的类型为'line'，你也可以设置为'area'来创建面积图等
            smooth: true,
            data: obg,
            encode: {tooltip: 0},
            symbol: 'none',
            lineStyle: {
              color: pfStyle.color,
              width: pfStyle.width,
              type: pfStyle.type
            },
            itemStyle: {
              color: pfStyle.color,
            }
          },
        ]
      };
      this.chart4.setOption(option);
    },
    // 样式确认按钮
    applyStyles() {
      this.renderEcharts();
      this.styleDrawerVisible = false;
    },
    //样式重置按钮
    resetStyles() {
      this.seriesStyles = JSON.parse(JSON.stringify(this.defaultSeriesStyles));
      this.renderEcharts();
      this.$message.success('已恢复默认样式');
    },
  },
}
</script>

<style lang="css" scoped>
.pmjl-container {
  width: 100%;
  overflow: hidden;
  padding: 0 3rem;
}

.pmjl-table {
  border-collapse: collapse;
  width: 100%;
}

.tr-chart td {
  padding: 0;
}

.chart-container {
  height: calc(100vh - 200px);
  min-height: 600px;
  width: 100%;
}

.pull-left {
  float: left;
  top: 0
}

.pull-right {
  float: right;
  top: 0
}

.c-red {
  color: red;
}

.both-clear {
  clear: both;
  height: 1.25rem;
  line-height: 1.25rem;
}

.style-editor-button {
  position: fixed; /* 或者 absolute, 取决于你的布局 */
  top: 100px;
  right: 20px;
  z-index: 200;
}

.drawer-body {
  padding: 0 20px;
  height: calc(100vh - 120px); /* 减去头部和脚部高度 */
  overflow-y: auto;
}

.drawer-footer {
  padding: 10px 20px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  text-align: right;
}

.style-config-row {
  display: flex;
  align-items: center;
}

.style-config-item {
  margin-right: 15px;
}
</style>